<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无缝轮播</title>
</head>
<style>
    *{ margin: 0; padding: 0; text-decoration: none;}
        body {
         padding: 20px;
         }
        #container { width: 1200px; height: 535px; border: 3px solid #333; overflow: hidden; position: relative;margin: 0 auto;}
        #list { width: 6000px; height: 535px; position: absolute; z-index: 1;}
        #list img { float: left;width: 1200px;}
        #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
        #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
        #buttons .on {  background: orangered;}
        .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
        .arrow:hover { background-color: RGBA(0,0,0,.7);}
        #container:hover .arrow { display: block;}
        #prev { left: 20px;}
        #next { right: 20px;}
 
</style>

<body>
    <div id="container">
        <div id="list" style="left: -1200px;">
            <img src="img/2.jpg" alt="3" />
            <img src="img/0.jpg" alt="1" />
            <img src="img/1.jpg" alt="2" />
            <img src="img/2.jpg" alt="3" />
            <img src="img/0.jpg" alt="1" />

        </div>
        <div id="buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>

        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>
</body>
<script type="text/javascript">
    window.onload=function() {
            // body... 
            var prev=document.getElementById("prev");
            var next=document.getElementById("next");
            var list=document.getElementById("list");
            var buttons=document.getElementById("buttons").getElementsByTagName("span");
            var container=document.getElementById("container");
            var index=1;
            var timer;
            var animated=false;
            function shownButton(){
                 for (var i = 0; i < buttons.length ; i++) {
                    if( buttons[i].className == 'on'){
                        buttons[i].className = '';
                       /* prev和next每click一次，
                        就会清除一次前一个class为on的span元素，
                        所以没有必要再去循环下面的span*/
                        break;
                    }
                    //  或者直接遍历清除  buttons[i].className=""；
                }
                buttons[index -1].className="on";
            }
            function animate(offset){ 
                var time = 300;
                var inteval = 10;
                var speed = offset/(time/inteval);
                  animated=true;
                 var newLeft=parseInt(list.style.left) +offset;
                function go(){
                    if ( (speed > 0 && parseInt(list.style.left) < newLeft) || (speed < 0 && parseInt(list.style.left) > newLeft)) {
                        list.style.left = parseInt(list.style.left) + speed + 'px';
                        setTimeout(go, inteval);
                    }
                    else 
                    {
                        
                       animated=false;
                     // list.style.left=newLeft+"px";
                         if (newLeft >-1200) {
                     list.style.left=-3600+"px";
                         };
                        if (newLeft <-3600) {
                     list.style.left=-1200+"px";
                      };
                    }
                }
                go();
            };
               
            prev.onclick=function(){
                /*添加一个if判断index为1时，如果继续往前滚的话就让index返回第五个span
                但是当快速点击arrow时会出现一种span点亮延迟的情况。可以尝试把判断index是否大于1或小于5的情况放进
                判断是否animated的if语句中，先判断能不能点击，再点亮。
                */
                if (!animated) {
                if (index==1) {
                    index=3;
                }else {
                   index -=1; 
                }
                
                shownButton();
                     animate(1200);
                }
              
               
            };
            next.onclick=function(){
                 
                
                
                if (!animated) {
                     if (index==3) {
                    index=1;
                }else {
                   index +=1; 
                }    
                     shownButton();
                     animate(-1200);
                }
            };
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick=function(){
                    //无关紧要
                    if (this.className=="on") {
                        return;
                    }
                    var myIndex=parseInt(this.getAttribute("index"));
                    var offset=-1200*(myIndex-index);
                     if (!animated) {
                     animate(offset);
                }
                    index=myIndex;
                     shownButton();
                
                }
            }
            
            function play(){
                timer=setInterval(function(){
                    next.onclick();
                },2000);
            }
            function stop(){
                clearInterval(timer);
            }
           play();
        container.onmouseover=stop;
        container.onmouseout=play;
        }
</script>

</html>